<template>
  <Page header="提现记录"  is-back>
  <view class="order">
    <u-sticky bgColor="#fff">
      <u-tabs active-color="#17BDB2" :list="allList" :is-scroll="false" :current="tabsIndex" @change="tabClick"></u-tabs>
    </u-sticky>

    <div class="order-list" v-if="orderList.length">
      <div class="order-item" v-for="item in orderList" :key="item.id">
        <div class="order-header" style="display: flex;">
          <span>{{ item.create_time }}</span>
          <span style="flex-shrink: 0;margin-left: 20px;font-size: 20px;font-weight: bold" :style="{ color: status === 1 ? 'green' : 'red'}">
            {{ status === 1 ? '+' : '' }}
            {{ item.amount}}元
          </span>
        </div>
        <u-line></u-line>
        <div class="order-header" style="display: flex;">
          <span>
            {{ item.user ? item.user.nickname : '' }}——
            {{ item.desc }}
          </span>
          <span style="flex-shrink: 0;margin-left: 20px;color: #fa3534;font-weight: bold" v-if="item.status === -1">待审核</span>
          <span style="flex-shrink: 0;margin-left: 20px;color: #fa3534;font-weight: bold" v-if="item.status === 0">提现失败</span>
          <span style="flex-shrink: 0;margin-left: 20px;color: #fa3534;font-weight: bold" v-if="item.status === 1">提现成功</span>
        </div>
      </div>
    </div>
  </view>
  </Page>
</template>

<script>
import Page from "../../components/Page.vue";

export default {
  components: {Page},
  data() {
    return {
      tabsIndex: 0,
      allList: [
        {tabId: 1,name: '收入', status: 'wait_food'},
        {tabId: 2,name: '提现', status: 'wait_received'},
      ],
      action:  this.$baseUrl + '/api/upload/file',

      orderList: [],
      baseUrl: this.$baseUrl,
      backShow: false,
      currentOrder: {},
      backReason: '',
      deleteShow: false,
      commentShow: false,
      comment: '',
      status: 'all',
      form: {
        staff_remark: '',
        fileList: []
      }
    }
  },
  onShow() {
    this.status = this.allList[this.tabsIndex].tabId
    this.getOrderList()
  },
  methods: {
    getOrderList() {
      this.$api.balanceList({
        type: this.status,
        user_id: this.$store.state.userInfo.id
      }).then(res => {
        this.orderList = res
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        uni.stopPullDownRefresh()
      })
    },
    tabClick(index){
      this.tabsIndex = index
      this.status = this.allList[index].tabId
      this.getOrderList()
    },
  },
  // 下拉刷新结束
  onPullDownRefresh() {
    this.getOrderList()
  }
}
</script>

<style scoped lang="scss">
.order {
  background-color: #f7f8fa;
  height: 100%;
  overflow: auto;
}

.order-list {
  padding: 20rpx;
}
.order-item {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
  }
  .button-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 40rpx;
  }
  .coupon {
    color: #dd6161;
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .car-item {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      border-bottom: 1px solid #f7f8fa;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        .goods-name {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #f15929;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
